<template>
    <div>
       <TitleHeader name="商品添加"></TitleHeader>
       <div class="commadd-box">
           <p>商品名称<el-input class="comm-input" v-model="name" placeholder="商品名称" style="width:400px"></el-input></p>
           <p>商品分类<el-select class="comm-input" v-model="type" placeholder="请选择" >
           <el-option v-for="item in options" :key="item.cateName" :label="item.cateName" :value="item.cateName" ></el-option>
          </el-select></p>
          <p>商品价格<el-input-number class="comm-input" v-model="num"  :min="1" :max="1000" label="描述文字"></el-input-number></p>
          <p>商品图片 <el-upload class="comm-input" :show-file-list="false"  :action="dialogImageUrl" list-type="picture-card" :on-success="handleAvatarSuccess" >
            <img v-if="imgUrl" :src="imgUrl"  class="avatar">
           <i class="el-icon-plus" v-else></i></el-upload></p>
          <p>商品描述<el-input class="comm-input" type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="30" style="width:400px" show-word-limit></el-input></p>
          <p><el-button class="comm-btn" type="primary" @click="clickaddGoods">添加商品</el-button> </p>
        </div>
    </div>
</template>

<script>
import TitleHeader from '../../../components/TitleHeader';
import {getCateName,addGoods} from '@/apis/goods'

    export default {
        data(){
            return{
                name:'',
                type:'',
                textarea: '',
                num:'',
                dialogImageUrl: 'http://127.0.0.1:5000/goods/goods_img_upload/',
                dialogVisible: false,
                options: [],
                imgUrl:'',
                imageUrl:'',
                
                
            }
        },
        methods:{
            clickaddGoods(){
              this.$confirm('是否确定添加商品, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
              .then(() => {
                 addGoods({name:this.name,category:this.type,price:this.num,imgUrl:this.imageUrl,goodsDesc:this.textarea}).then(res=>{
                    if(res.data.code==0){
                        this.$message({type: 'success',message: '臭臭世界提示:添加商品成功!',center: true});
                         this.name='';
                         this.type='';
                         this.textarea= '';
                         this.num='';
                         this.imgUrl='';
                    }else{
                        this.$message({type: 'error',message: '臭臭世界提示:添加失败!',center: true});
                    }
                })
                 })
                 .catch(() => {this.$message({type: 'success',message: '臭臭世界提示:已取消成功',center: true});});  
            },
           handleAvatarSuccess(res, file){
              this.imgUrl = URL.createObjectURL(file.raw);
              if(res.code==0){
                 this.$message({type: 'success',message: '臭臭世界提示:商品图片上传成功!',center: true});
                 this.imageUrl=res.imgUrl;
              }
              
           }
          // http://127.0.0.1:5000/upload/imgs/goods_img/1618724297807.jpg
        },
        components:{
            TitleHeader,
        },
        created(){
          getCateName().then(res=>{
            this.options=res.data.categories;
          })
        }
    }
</script>

<style lang="less" scoped>
.commadd-box{
    p{
        display: flex;
        align-items: center;
        margin-top: 20px;
    }
}
.comm-input{
    margin-left: 10px;
}
.comm-btn{
    margin-left: 75px;
}
.avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
</style>